<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>拖拽</title>
    <link rel="stylesheet" href="css/index.css" />
    <script src="js/vue.js"></script>
    <script src="js/elementui.js"></script>
    <script src="js/common.js"></script>
    <script src="js/vue-grid-layout.umd.min.js"></script>
    <script src="js/axios.js"></script>
    <style type="text/css">
        .gridItem {
            border: solid black 1px;
            background-color: #CCCCCC;
        }
        .gridItem2 {
            border: solid black 1px;
            background-color: #ffaa00;
        }
        #griddiv {
            border: 1px solid
        }
    </style>
</head>
<body>
    <div id="app">
        <button @click="initgrid">生成</button>
        <div id="griddiv">
            <grid-layout :layout.sync="layout" :col-num="30" :row-height="20" :is-draggable="true"
                :is-resizable="true" :is-mirrored="false" :vertical-compact="false" :margin="[5, 5]"
                :use-css-transforms="true" :responsive="false"
                :prevent-collision="true">
                <grid-item v-for="item in layout" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i"
                    :key="item.i" :class="item.status==1?'gridItem':'gridItem2'">
                    {{item.i}}
                </grid-item>
            </grid-layout>
        </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                layout: [],
            },
            methods: {
                initgrid() {
                    this.fetchSeatsData();
                },
                fetchSeatsData() {
                    axios.get('http://localhost:8080/selectSeatsByHallId',{
						params:{
							hallId:1
						}
					}) // 替换为你的后端接口地址
                        .then(response => {
                            const seatsList = response.data.data.seatsList;
                            this.layout = seatsList.map(seat => ({
                                x: seat.col,
                                y: seat.row,
                                w: seat.w || 1,
                                h: seat.h || 1,
                                i: seat.seatId.toString(),
                                status: seat.status,
                            }));
                        })
                        .catch(error => {
                            console.error('There was an error fetching the seats data!', error);
                        });
                }
            },
            mounted() {
                // 可以在这里调用initgrid来初始化布局
                // this.initgrid();
            }
        })
    </script>
</body>
</html>